<template>
    <el-card v-loading="loading" style="width: 99%;">
        <div style="display:flex;justify-content:space-between;align-items: center">
            <div class="account">
                <div>
                    <h4>手机登录</h4>
                    <div>
                        <el-input :model-value="userStore.account.telephone" disabled/>
                        <el-button v-if="!userStore.account.telephone" @click="changeTelephone">绑定号码</el-button>
                        <el-button v-else  @click="changeTelephone">更换号码</el-button>
                    </div>
                </div>
                <el-divider/>
                <div>
                    <h4>邮箱登录</h4>
                    <div>
                        <el-input :model-value="userStore.account.email" disabled/>
                        <el-button v-if="!userStore.account.email" @click="changeEmail">绑定邮箱</el-button>
                        <el-button v-else @click="changeEmail">更换邮箱</el-button>
                    </div>
                </div>
                <el-divider/>
                <div style="padding-bottom: 0">
                    <h4>密码</h4>
                    <div>
                        <el-input model-value="***********" disabled show-password/>
                        <el-button @click="changePassword">修改密码</el-button>
                    </div>
                </div>
            </div>
            <div>
                <Transition mode="out-in"
                            class="animate__animated animate__faster"
                            enter-active-class="animate__zoomIn"
                            leave-active-class="animate__zoomOut">
                    <Component :is="tab" @update:tab="tab = $event"></Component>
                </Transition>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import {defineAsyncComponent, onMounted, ref} from "vue";

import {useUserStore} from "@/stores/user";

const userStore = useUserStore()

const ChangeTelephone = defineAsyncComponent(() => import("@/views/User/Account/components/ChangeTelephone.vue"));
const ChangeEmail = defineAsyncComponent(() => import("@/views/User/Account/components/ChangeEmail.vue"));
const ChangePassword = defineAsyncComponent(() => import("@/views/User/Account/components/ChangePassword.vue"));

let loading = ref(true)
let tab = ref()
const changeTelephone = () => {
    tab.value = ChangeTelephone
}

const changeEmail = () => {
    tab.value = ChangeEmail
}

const changePassword = () => {
    tab.value = ChangePassword
}
onMounted(()=>loading.value = false)
</script>

<style scoped lang="scss">
.account {
    width: 40%;
    padding: 10px 30px;
    div {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 10px;

        div {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            padding-bottom: 0;
            padding-top: 10px;

            .el-input {
                width: 55%;

            }
            :deep(.el-input.is-disabled .el-input__inner) {
                cursor: default;
            }
        }
    }
}
</style>